<template>
  <div>
    <div class="warnningTip"><i class="el-icon-warning-outline" />{{ $t('message.sjksm') }}</div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <div v-if="meta.indexOf('AddOrUpdateIndividualLesson') > -1" class="doumee_table_header">
      <el-button
        type="primary"
        @click="courseAdd()"
      >{{ $t('message.add') }}</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
    >
      <el-table-column
        align="center"
        :label="$t('message.kcmc')"
        min-width="160"
        prop="courseName"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="meta.indexOf('IndividualLessonDetail') > -1" class="primaryColor sbxf" @click="showDetail(scope.row)">{{ scope.row.courseName }}</span>
          <span v-else class="wzZts sbxf">{{ scope.row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.kctp')" min-width="90" prop="courseImage">
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 30px;"
            fit="contain"
            :src="scope.row.courseFullImg"
            :preview-src-list="[scope.row.courseFullImg]"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.skms')"
        prop="courseType"
        min-width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.courseType == "0" ? $t('message.ydy') : $t('message.ydd') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.skjl')"
        min-width="80"
        prop="teacherNum"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.kcscfz')"
        prop="duration"
        min-width="120"
      />
      <el-table-column
        align="center"
        :label="$t('message.skjgy')"
        prop=""
        min-width="120"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <el-popover
            placement="bottom"
            width="200"
            trigger="click"
          >
            <div class="tac">
              <div v-for="item in scope.row.coursePrice" :key="item.teacherLevelId" class="h24">{{ item.teacherLevelName }}：{{ item.price }}</div>
            </div>
            <span slot="reference" class="primaryColor pointer underline">{{ $t('message.ckxq') }}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.fbqd')"
        prop="channelName"
        min-width="130"
      />
      <el-table-column
        align="center"
        :label="$t('message.ksdd')"
        prop="site"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.sort')"
        min-width="60"
        prop="sortNum"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.createTime')"
        min-width="160"
        show-overflow-tooltip
        prop="createTime"
      />
      <el-table-column
        align="center"
        :label="$t('message.status')"
        prop="status"
        fixed="right"
        min-width="80"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status == '1'">{{ $t('message.dfb') }}</span>
          <span v-if="scope.row.status == '2'">{{ $t('message.yfb') }}</span>
          <span v-if="scope.row.status == '3'">{{ $t('message.bmyjz') }}</span>
          <span v-if="scope.row.status == '4'">{{ $t('message.jxz') }}</span>
          <span v-if="scope.row.status == '5'">{{ $t('message.yjs') }}</span>
          <span v-if="scope.row.status == '6'">{{ $t('message.yqx') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.caozuo')" :width="$i18n.locale === 'ZH'? 200 : 260" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <template v-if="scope.row.status =='1' || scope.row.status =='2'">
              <el-button
                v-if="meta.indexOf('AddOrUpdateIndividualLesson') > -1"
                type="text"
                @click="courseAdd(scope.row)"
              >{{ $t('message.edit') }}</el-button>
            </template>
            <el-button
              v-if="meta.indexOf('AddOrUpdateIndividualLesson') > -1"
              v-preventReClick
              type="text"
              @click="handleCopy(scope.row)"
            >{{ $t('message.copy') }}</el-button>
            <el-button
              v-if="scope.row.status == '1' && meta.indexOf('HandleIndividualLesson') > -1"
              type="text"
              class="secondColor"
              @click="rowStatusUpdate(scope.row, '0')"
            >{{ $t('message.del') }}</el-button>
            <el-button
              v-if="scope.row.status == '1' && meta.indexOf('HandleIndividualLesson') > -1"
              v-preventReClick
              type="text"
              @click="rowStatusUpdate(scope.row, '1')"
            >{{ $t('message.fb') }}</el-button>
            <el-button
              v-if="scope.row.status == '2' && meta.indexOf('HandleIndividualLesson') > -1"
              v-preventReClick
              type="text"
              @click="rowStatusUpdate(scope.row, '2')"
            >{{ $t('message.xiajia') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <orderDialog ref="child" @orderSuccess="getList" />
    <Detail v-if="isShowDetail" ref="DetailRef" />
    <CourseAdd v-if="isShowCourseAdd" ref="courseAddRef" @success="CourseAddSuccess" @close="isShowCourseAdd = false" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import orderDialog from '@/components/order'
import QueryForm from '@/components/QueryForm'
import CourseAdd from './components/offlinecoursesAdd'
import Detail from './components/detail.vue'
import {
  getChannelType,
  UpdateIndividualLesson,
  IndividualLesson,
  deleteUserReserveRecord,
  teacherList,
  updateStatusCourse
} from '@/api'
import store from '@/store'
import { queryFormConfig } from './config'
export default {
  name: 'OfflinecoursesList',
  components: {
    orderDialog,
    QueryForm,
    Detail,
    CourseAdd
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryFormConfig,
      modalDialog: store.getters.dialog,
      isShowDetail: false,
      isShowCourseAdd: false,
      tableChangeData: [],
      totalNo: 0,
      studentForm: {},
      showStudent: false,
      formStudent: {},
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      paginationb: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {},
      listLoading: true,
      showPayment: false,
      // member: '',
      change: 0,
      listLoadings: false,
      detail: {}
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
    this.getTeachList()
    this.getChannel()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    getChannel() {
      getChannelType({ param: { code: 'CHANNEL_COURSE' }}).then(res => {
        this.queryFormConfig.formItems[4].options = res.recordList.map(item => {
          return {
            label: item.name,
            value: item.value
          }
        })
      })
    },
    courseAdd(row) {
      this.isShowCourseAdd = true
      if (row && row.id) {
        this.$nextTick(() => {
          this.$refs.courseAddRef.isShowDrawer = true
          this.$refs.courseAddRef.param = JSON.parse(JSON.stringify(row))
          setTimeout(() => {
            this.$refs.courseAddRef.initParam(row)
          }, 1000)
        })
      } else {
        this.$nextTick(() => {
          this.$refs.courseAddRef.isShowDrawer = true
          this.$refs.courseAddRef.getCardList()
        })
      }
    },
    handleCopy(row) {
      this.isShowCourseAdd = true
      if (row && row.id) {
        this.$nextTick(() => {
          this.$refs.courseAddRef.isShowDrawer = true
          this.$refs.courseAddRef.param = { ...row, id: null }
          setTimeout(() => {
            this.$refs.courseAddRef.initParam(row)
          }, 1000)
        })
      } else {
        this.$nextTick(() => {
          this.$refs.courseAddRef.isShowDrawer = true
          this.$refs.courseAddRef.getCardList()
        })
      }
    },
    CourseAddSuccess() {
      this.isShowCourseAdd = false
      this.getList(1)
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    clearFilter() {
      this.studentForm = {}
      this.getMembersList(1)
    },
    showDetail(row) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.DetailRef.showDetail(row)
      })
    },
    addItem() {
      const members = this.param.members
      members.push({})
      // this.param.members = members
      this.$set(this.param, 'members', members)
    },
    updateStatus(e, index) {
      let str = ''
      const that = this
      if (index === 1) {
        str = this.$t('message.fbtc')
      } else {
        str = this.$t('message.sctc')
      }
      this.$confirm(str, this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          updateStatusCourse({
            param: { courseId: e.courseId, operation: index }
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                if (index === 1) {
                  that.$message.success(this.$t('message.fbcg'))
                } else {
                  that.$message.success(this.$t('message.delcg'))
                }
                that.getList(1)
              }
            })
        })
    },
    rowStatusUpdate(row, type) {
      UpdateIndividualLesson({
        param: {
          courseId: row.id,
          type
        }
      }).then(res => {
        if (res.errorCode !== '000000') return
        const str = type === '0' ? this.$t('message.delcg') : type === '1' ? this.$t('message.fbcg') : this.$t('message.xjcg')
        this.$message.success(str)
        this.getList()
      })
    },
    getTeachList() {
      const venueId = sessionStorage.getItem('venueId')
      teacherList({ param: { venueId, teacherType: '1', isOnJob: '1', status: '1' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.teacherName
            e.value = e.teacherId
          })
          this.queryFormConfig.formItems[2].options = arr
        })
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination = pagination
      }
      pagination.firstQueryTime = parseTime(new Date())
      filters.flag = '2'
      this.listLoading = true
      IndividualLesson({ pagination, param: { venueId, ...filters }})
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList.map(item => {
            item.teacherNum = item.teacherNum + this.$t('message.ren')
            return item
          })
          this.total = res.totalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    deletelBtn(e) {
      deleteUserReserveRecord({ param: { reserveAndOrderId: e.id }})
        .then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success(this.$t('message.delcg'))
            this.getList(1)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.messgae-style {
  color: #dd0707;
}
.price-style {
  font-size: 17px;
  font-weight: 500;
}
.unit-style {
  margin-right: 20px;
}
.card-message {
  margin-bottom: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
.add-item {
  .add-item-members {
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
    .content {
      .checkbox{
        zoom: 250%;
        vertical-align:middle;
      }
      .name {
        margin-left: 10px;
        width: 100px;
      }
      .identitycard {
        margin-left: 10px;
        width: 180px;
      }
      .data-picker-style{
        margin-left: 10px;
        width: 150px;
      }
      .sex {
        margin-left: 10px;
        margin-right: 20px;
        width: 80px;
      }
    }
  }
}
.siteDetails {
  display: flex;
  flex-wrap: wrap;
  .form-item {
    width: 33.33%;
    display: flex;
    margin-right: 0%;
    margin-bottom: 5px;
    ::v-deep .el-form-item__content {
      flex: 1;
    }
    ::v-deep .el-date-editor {
      width: 100%;
    }
  }
}
</style>
